<template>
  <div
    :id="id"
    :style="{
      width,
      height
    }"
  ></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "400px"
    },
    height: {
      type: String,
      default: "400px"
    },
    pieData: {
      type: Object,
      default: () => {}
    }
  },

  computed: {
    focusFormat() {
      return (value) => {
        return parseFloat(value) || 0;
      };
    }
  },

  methods: {
    init() {
      const { pieData } = this.$props;
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {d}%"
        },
        color: ["#78F8FC", "#38C3FF", "#2CA1FF", "#21DBF3", "#E0D901", "#E4BF00", "#D9CC00", "#F6DB49"],
        legend: {
          data: ["教师讲授", "指导学生", "书写板书", "师生互动", "教师巡视", "听讲", "实践", "演示", "阅读", "讨论"]
        },
        series: [
          {
            name: "教师",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "60%"], //可调整饼图相对于父盒子的位置
            data: [
              {
                value: this.focusFormat(pieData.teacher_behavior_count.listen_rate),
                name: "教师讲授"
              },
              {
                value: this.focusFormat(pieData.teacher_behavior_count.guidance_rate),
                name: "指导学生"
              },
              {
                value: this.focusFormat(pieData.teacher_behavior_count.blackboard_rate),
                name: "书写板书"
              },
              {
                value: this.focusFormat(pieData.teacher_behavior_count.interaction_rate),
                name: "师生互动"
              },
              {
                value: this.focusFormat(pieData.teacher_behavior_count.tour_rate),
                name: "教师巡视"
              }
            ],
            label: {
              position: "inner",
              formatter: "{d}%"
            }
          },
          {
            name: "学生",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            center: ["50%", "60%"], //可调整饼图相对于父盒子的位置
            label: {
              position: "inner",
              formatter: "{d}%"
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.focusFormat(pieData.student_behavior_count.listen_rate),
                name: "听讲"
              },
              {
                value: this.focusFormat(pieData.student_behavior_count.practice_rate),
                name: "实践"
              },
              {
                value: this.focusFormat(pieData.student_behavior_count.demonstrate_rate),
                name: "演示"
              },
              {
                value: this.focusFormat(pieData.student_behavior_count.read_rate),
                name: "阅读"
              },
              {
                value: this.focusFormat(pieData.student_behavior_count.discuss_rate),
                name: "讨论"
              }
            ]
          }
        ]
      };
      const dom = document.getElementById(this.$props.id);

      const pieChart = echarts.init(dom);
      pieChart.setOption(option);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>
<style lang=""></style>
